<template>
  <div class="question">
    <!-- 主体部分 -->
    <div class="list">
      <!-- 顶部按钮部分 -->
      <div class="topBtn">
        <!-- 左侧新建、刷新、上传、下载按钮部分 -->
        <el-button type="primary" icon="el-icon-plus" size="mini" @click="create">新建</el-button>
        <el-button type="primary" icon="el-icon-refresh" size="mini" @click="fresh">全量刷新</el-button>
        <div class="upload-demo">
          <el-upload action="https://jsonplaceholder.typicode.com/posts/" :on-change="handleChange"
            :show-file-list="status">
            <el-button type="primary" size="mini">文件上传<i class="el-icon-upload2"></i></el-button>
          </el-upload>
        </div>
        <div class="down-demo">
          <el-button type="primary" size="mini" @click="download">文件下载<i class="el-icon-download"></i></el-button>
        </div>
        <div class="right-btn">
          <!-- 右侧搜索、检索按钮部分 -->
          <el-input size="mini" placeholder="请输入内容" suffix-icon="el-icon-search" v-model="input" style="width:200px">
          </el-input>
          <el-button type="primary" size="mini">查询</el-button>
          <el-button type="info" icon="el-icon-caret-bottom" size="mini" @click="searchHeig"></el-button>
        </div>
      </div>
      <!-- 表格部分 -->
      <template>
        <el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" border style="width: 100%">
          <el-table-column fixed prop="id" label="序号" width="60">
          </el-table-column>
          <el-table-column prop="stem" label="题干" width="240" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="analytical" label="解析" width="120" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="score" label="分数" width="120">
          </el-table-column>
          <el-table-column prop="person" label="创建人" width="120">
          </el-table-column>
          <el-table-column prop="difficulty" label="难度" width="80">
          </el-table-column>
          <el-table-column prop="questiontype" label="题型" width="120">
          </el-table-column>
          <el-table-column prop="subject" label="学科" width="120">
          </el-table-column>
          <el-table-column prop="time" label="更新时间" width="200">
          </el-table-column>
          <el-table-column label="操作" width="200">
            <template slot-scope="scope">
              <!-- 详情按钮 -->
              <el-button type="success" size="mini" @click="detailVisible = true">详情</el-button>
              <el-button type="success" size="mini" @click="edit(scope.row)">编辑</el-button>
              <el-button type="danger" icon="el-icon-delete" size="small" @click="del(scope.$index,scope.row)">
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <!-- 分页器部分 -->
      <div style="text-align:right;margin:20px">
        <el-pagination background layout="total, sizes, prev, pager, next, jumper" :total="tableData.length"
          :page-size="pageSize" :page-sizes="[5,10,15]" :current-page="currentPage" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" @prev-click="upChange" @next-click="nextChange">
        </el-pagination>
      </div>
    </div>

    <!-- 点击创建按钮弹出弹框部分 -->
    <div class="confirmBtn">
      <el-dialog title="创建问题" :visible.sync="createVisible" width="50%" :before-close="handleClose">
        <div>
          <el-steps :active="active" finish-status="success">
            <el-step title="问题内容"></el-step>
            <el-step title="问题分类"></el-step>
            <el-step title="问题选项"></el-step>
          </el-steps>
          <!-- 问题内容部分 -->
          <!-- 富文本编辑器部分 -->
          <div :v-model="form" v-if="active === 0">
            <div class="ques">
              <span>题干:</span>
              <quill-editor ref="myTextEditor" label="内容：" v-model="content1" :options="editorOption"
                style="height: 150px; margin-left: 40px;width:840px;margin-top: -15px;"></quill-editor>
            </div>
            <div style="height:60px;"></div>
            <div class="jie">
              <span>解析：</span>
              <quill-editor ref="myTextEditor" label="内容：" v-model="content2" :options="editorOption"
                style="height: 150px; margin-left: 40px;width:840px;margin-top: -15px;"></quill-editor>
            </div>
          </div>
          <!-- 问题分类部分 -->
          <div v-if="active === 1">
            <div v-html="'题目：'" style="margin-left: 60px;line-height: 50px;"></div>
            <el-form :model="form" ref="form" :rules="rules" label-width="100px" class="demo-ruleForm">
              <el-form-item label="题型" prop="questiontype" required>
                <el-select v-model="form.questiontype" placeholder="多选题" clearable>
                  <el-option label="单选题" value="单选题"></el-option>
                  <el-option label="多选题" value="多选题"></el-option>
                  <el-option label="判断题" value="判断题"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="归类" prop="subject" required>
                <el-select v-model="form.subject" placeholder="Java基础" clearable>
                  <el-option label="Java基础" value="Java基础"></el-option>
                  <el-option label="Web基础" value="Web基础"></el-option>
                  <el-option label="数据基础" value="数据基础"></el-option>
                  <el-option label="Java进阶" value="Java进阶"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="难度" prop="difficulty" required>
                <el-select v-model="form.difficulty" placeholder="难" clearable>
                  <el-option label="难" value="难"></el-option>
                  <el-option label="中等" value="中等"></el-option>
                  <el-option label="易" value="易"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </div>
          <!-- 新建部分的问题选项部分 -->
          <div v-if="active === 2">
            <div v-html="'题目：'" style="margin-left: 15px;line-height: 50px;"></div>
            <el-form :model="form1" :rules="rules" ref="form1" label-width="80px" class="demo-ruleForm">
              <el-form-item label="创建选项" prop="option">
                <el-input v-model="form1.option" class="xuanxiang" style="width: 85%" @keyup.enter.native="options()">
                </el-input>
                <el-button icon="el-icon-plus" @click="options"></el-button>
              </el-form-item>
              <el-form-item label="设置答案" prop="answer">
                <el-select v-model="form1.answer" placeholder="请选择答案" :multiple="multiple" clearable>
                  <el-option v-for="(item, index) in opt" :key="index" :label="item" :value="item"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </div>
          <div class="prev">
            <el-button style="margin-top: 50px;margin-left: 40px;" @click="prev">上一步
            </el-button>
            <el-button style="margin-top: 70px;margin-left: 560px;" @click="cancel">取消</el-button>
            <el-button style="margin-top: 70px;margin-right: 10px;" @click="next" v-if="active != 2">下一步
            </el-button>
            <el-button @click="detailFinsh" v-if="active == 2" type="primary">完成</el-button>
          </div>
        </div>
      </el-dialog>
    </div>
    <!-- 点击右侧按钮弹出高级检索框部分 -->
    <el-dialog title="Advanced search" :visible.sync="searchVisible" width="25%" :before-close="handleClose">
      <hr>
      <el-form ref="form" :model="form" label-width="120px" label-position="left" size="mini">
        <el-form-item label="题干" style="margin-top:10px;">
          <el-input v-model="form.stem" style="width:300px;" placeholder="题干"></el-input>
        </el-form-item>
        <el-form-item label="创建人" style="margin-top:10px;">
          <el-input v-model="form.person" style="width:300px;" placeholder="创建人"></el-input>
        </el-form-item>
        <el-form-item label="难度" style="margin-top:10px;">
          <el-input v-model="form.difficulty" style="width:300px;" placeholder="难度"></el-input>
        </el-form-item>
        <el-form-item label="题型" style="margin-top:10px;">
          <el-input v-model="form.questiontype" style="width:300px;" placeholder="题型"></el-input>
        </el-form-item>
        <el-form-item label="学科" style="margin-top:10px;">
          <el-input v-model="form.subject" style="width:300px;" placeholder="学科"></el-input>
        </el-form-item>
        <el-form-item style="margin-left:120px;margin-top:10px;">
          <el-button type="primary" @click="submitForm('form')">检索</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 点击详情按钮弹出题目信息弹框 -->
    <el-dialog title="题目信息" :visible.sync="detailVisible">
      <el-form :data="tableData">
        <hr>
        <el-form-item label="题干：" :label-width="formLabelWidth"><br>
          <div>这是第一个选项</div>
        </el-form-item>
        <el-form-item label="选项：" :label-width="formLabelWidth"><br>
          <div>
            <ul>
              <li>这是第一个选项</li>
              <li>这是第二个选项</li>
              <li>这是第三个选项</li>
              <li>这是第四个选项</li>
            </ul>
          </div>
        </el-form-item>
        <el-form-item label="答案：" :label-width="formLabelWidth"><br>
          <div>
            <ul>
              <li>这是第一个选项</li>
            </ul>
          </div>
        </el-form-item>
        <el-form-item label="解析：" :label-width="formLabelWidth"><br>
          <div>这是一个测试解析</div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="detailVisible = false">关 闭</el-button>
      </div>
    </el-dialog>

    <!-- 点击编辑按钮弹出编辑信息弹框 -->
    <el-dialog title="编辑题目" :visible.sync="editVisible" width="40%" :before-close="handleClose">
    </el-dialog>

    <!-- 点击删除按钮弹出删除信息弹框 -->
  </div>
</template>

<script>
import { quillEditor } from "vue-quill-editor";
export default {
  name: "Question",
  components: {
    quillEditor,
  },
  methods: {
    handleClick(value) {
      console.log(value);
    },
    handleChange(file, fileList) {
      console.log(file, fileList);
    },
    handleClose(done) {//对话框：点击X关闭页面提示信息
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => { });
    },
    //新建点击方法
    create() {
      this.createVisible = true;
    },
    // 全量刷新
    fresh() {
      this.$router.go(0);
    },
    // 点击文件下载按钮提示信息
    download() {
      this.$confirm('是否要下载此文件?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '下载成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消下载'
        });
      });
    },
    //高级检索点击方法
    searchHeig() {
      this.searchVisible = true;
    },
    // 详情操作
    detail() {
      this.detailVisible = true;
    },
    // 编辑操作
    edit(row) {
      this.$http.get(`${row.id}`).then(res => {
        console.log(res);
      })
    },
    // 操作中的删除操作
    del(id) {
      console.log(id);
      this.$confirm("确定要删除此条信息吗？, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.tableData = this.tableData.filter((index) => index.id != id + 1);
      }).catch(() => {
        this.$message({
          type: "info",
          message: "已取消删除",
        });
      })
    },
    // 检索提交部分
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('提交!');
        } else {
          console.log('提交错误!!');
          return false;
        }
      });
    },
    // 分页部分
    // 改变每页显示的数据
    handleSizeChange(val) {
      console.log(`每页${val}条`);
      this.pageSize = val
      this.currentPage = 1
    },
    // 更改页码
    handleCurrentChange(val) {
      console.log(`当前页${val}条`);
      this.currentPage = val
    },
    // 上一页
    upChange(val) {
      console.log(val);
      this.currentPage -= 1;
    },
    // 下一页
    nextChange(val) {
      this.currentPage += 1;
    },
    // 新建部分的上一步、取消、下一步
    // 上一步
    prev() {
      this.active = this.active - 1;
      this.active1 = this.active1 - 1;
    },
    // 取消
    cancel() {
      this.createVisible = false
    },
    // 下一步
    next() {
      if (this.active++ > 2 ) {
        this.active = 0;
      }
    },
    // 创建选项
    options() {
      if (this.form.questiontype == "单选题" || this.form.questiontype == "多选题") {
        this.opt.push(this.form1.option);
      }
      if (this.form.questiontype == "多选题") {
        this.multiple = true;
      } else {
        this.multiple = false;
      }
      if (this.form.questiontype == "判断题") {
        this.opt = [];
        this.opt.push("正确");
        this.opt.push("错误");
      }
      this.form1.option = "";
    },
  },

  data() {
    return {
      input: '',
      createVisible: false,//创建按钮的对话弹框默认不显示
      searchVisible: false,//高级检索弹框
      detailVisible: false,//详情弹框
      formLabelWidth: '120px',
      status: false,//上传文件按钮是否显示上传列表
      // 分页部分数据
      pageSize: 10,//显示的数据条数
      currentPage: 1,//当前页开始的页数
      total: 50,//总条数
      // 详情部分
      taskDetailList: [],
      // 创建部分
      active: 0,
      active1: 1,
      form1: {
        option: "",
        answer: "",
      },
      opt: [],
      form: {
        id: '',
        stem: '',
        analytical: '',
        score: '',
        person: '',
        difficulty: '',
        questiontype: '',
        subject: '',
        time: '',
        do: '',
      },
      content: '',
      editorOption: {
        modules: {
          toolbar: [//富文本编辑器工具部分
            [
              "bold",
              "italic",
              "underline",
              "image",
            ], // toggled buttons  
            [{ 'align': [] }],    //对齐方式
            [{ 'font': [] }],     //字体 
            [{ 'size': ['small', 'normal', 'large', 'huge'] }],
            [{ 'color': [] }],     // 字体颜色，字体背景颜色 
          ],
        },
        placeholder: '请输入内容',
      },
      rules: {
        questiontype: [{ message: "请选择题型", trigger: "change" }],
        subject: [{ message: "请选择归类", trigger: "change" }],
        difficulty: [{ message: "请选择难度", trigger: "change" }],
        option: [{ required: true, message: "请创建选项", trigger: "change" }],
        answer: [{ required: true, message: "请选择答案", trigger: "change", }],
      },
      tableData: [{//表格数据部分
        id: '1',
        stem: '中括号和点语法的区别',
        analytical: '解析',
        score: '5',
        person: 'admin',
        difficulty: '简单',
        questiontype: '多选题',
        subject: '前端学科',
        time: '2022-10-11 19:25:35',
      }, {
        id: '2',
        stem: 'getElementByTagName()和querySelectAll()的区别',
        analytical: '解析',
        score: '5',
        person: 'admin',
        difficulty: '中等',
        questiontype: '单选题',
        subject: '前端学科',
        time: '2022-10-11 19:25:35',
      }, {
        id: '3',
        stem: 'html',
        analytical: '解析',
        score: '5',
        person: 'admin',
        difficulty: '难',
        questiontype: '单选题',
        subject: '前端学科',
        time: '2022-10-11 19:25:35',
      }, {
        id: '4',
        stem: 'html',
        analytical: '解析',
        score: '5',
        person: 'admin',
        difficulty: '难',
        questiontype: '单选题',
        subject: '前端学科',
        time: '2022-10-11 19:25:35',
      }, {
        id: '5',
        stem: 'html',
        analytical: '解析',
        score: '5',
        person: 'admin',
        difficulty: '难',
        questiontype: '单选题',
        subject: '前端学科',
        time: '2022-10-11 19:25:35',
      }, {
        id: '6',
        stem: 'html',
        analytical: '解析',
        score: '5',
        person: 'admin',
        difficulty: '难',
        questiontype: '单选题',
        subject: '前端学科',
        time: '2022-10-11 19:25:35',
      }, {
        id: '7',
        stem: 'html',
        analytical: '解析',
        score: '5',
        person: 'admin',
        difficulty: '难',
        questiontype: '单选题',
        subject: '前端学科',
        time: '2022-10-11 19:25:35',
      }, {
        id: '8',
        stem: 'html',
        analytical: '解析',
        score: '5',
        person: 'admin',
        difficulty: '难',
        questiontype: '单选题',
        subject: '前端学科',
        time: '2022-10-11 19:25:35',
      }, {
        id: '9',
        stem: 'html',
        analytical: '解析',
        score: '5',
        person: 'admin',
        difficulty: '难',
        questiontype: '单选题',
        subject: '前端学科',
        time: '2022-10-11 19:25:35',
      }, {
        id: '10',
        stem: 'html',
        analytical: '解析',
        score: '5',
        person: 'admin',
        difficulty: '难',
        questiontype: '单选题',
        subject: '前端学科',
        time: '2022-10-11 19:25:35',
      },
      ]
    }
  }
};
</script>

<style lang="less" scoped>
// 列表部分修饰
.list {
  width: 1400px;
  // height: 750px;
  background-color: #fff;
  margin: 20px auto;

  // 顶部按钮部分修饰
  .topBtn {
    padding: 10px 0px 10px 10px;

    .upload-demo {
      margin-top: -27px;
      margin-left: 190px;
      width: 100px;
    }

    .down-demo {
      margin-top: -27px;
      margin-left: 290px;
      width: 100px;
    }

    .right-btn {
      float: right;
      margin-right: 10px;
      margin-top: -27px;
    }
  }
}
</style>